<template>
	<view class="Hotmain">
		<view class="all">
			<view class="head">
				<view class="logo">
					<image :src="logo" style="width: 100rpx;height: 100rpx;" mode=""></image>
				</view>
				<view class="title">
					<text style="color: #333333;font-size: 34rpx;font-weight: bold;">{{merchantName}}</text>
					<view class="star">
						<view style="margin-right: 30rpx;">
							<uni-rate :size="22" :readonly="true" :value="averageSocre" />
						</view>
						<view class="about">
							<text style="color: #FFB31A;font-size: 24rpx;margin-left: 10rpx;">{{averageSocre}}分</text>
							<text style="color: #333333;font-size: 24rpx;margin-left: 120rpx;">月售{{monthSell}}</text>
						</view>
					</view>
					<view class="address">
						<text style="color: #333333;font-size: 28rpx;">{{address}}</text>
					</view>
					<view class="heart" @click="collect()">
						<image src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/collection.png" v-show="!islove" mode=""></image>
						<image src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/collection2.png" mode="" v-show="islove"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="numb_nav">
			<view :class="['nav_te',Inv==0?'nav_tes':'']" @click="Inv=0"><text>团购</text></view>
			<view :class="['nav_te',Inv==1?'nav_tes':'']" @click="Inv=1"><text>商家</text></view>
		</view>
		<view class="group" v-show="Inv == 0">
			<view class="shop" v-for="item in allList" :key="item.id">
				<view class="shopimg" @click="go(item.id)">
					<image :src="item.imageList" mode=""></image>
				</view>
				<view class="shopword">
					<text class="shopname">{{item.commodityName}}</text>
					<view class="shopint">
						<text style="font-size: 24rpx;color: #000000;margin-left: 20rpx;">{{item.explains}}</text>
					</view>
					<view class="partake">
						<text>{{item.distribution==0?'分销':'不分销'}}</text>
					</view>
					<!-- <view class="monthgod">
						<text>月售{{item.salesVolume}}</text>
					</view> -->
					<view class="shopmoney">
						<text style="font-size: 20rpx;color: #000000;">￥</text>
						<text style="color: #FF6633;font-size: 34rpx;">{{item.currentPrice}}</text>
						<text style="color: #999999;font-size: 20rpx;font-weight:bold;text-decoration: line-through;margin-left: 20rpx;">{{item.originalPrice}}</text>
						<view class="Qbuy" @click="go(item.id)">
							<text>抢购</text>
						</view>
					</view>
				</view>
			</view>
			<view class="up">
				<text style="font-size: 24rpx;color: #999999;">上滑或点击查看更多</text>
			</view>
		</view>
		<view class="div_1" v-show="Inv == 1">
			<!-- 地址 -->
			<view class="local">
				<image src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/local.png" mode=""></image>
				<text>{{address}}</text>
			</view>
			<!-- 店铺图片 -->
			<view class="storeimg" v-for="(item,index) in qualificationsImagesList" :key="index">
				<image :src="item" mode=""></image>

			</view>
			<!-- 查看相关资质 -->
			<view class="storesee">
				<text style="margin-left: 23rpx;">查看相关资质</text>
			</view>
			<!-- 服务时间 -->
			<view class="servetime">
				<text style="margin-left: 23rpx">服务时间:{{busineddHours}}</text>
			</view>
			<!-- 店铺分享 -->
			<view class="shopenjoy">
				<text style="margin-left: 23rpx">{{distribution}}店铺分销</text>
				<view class="yellowenjoy">
					<text>一键分享</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Inv: 0,
				islove: true,
				logo: '',
				merchantName: '',
				averageSocre: '',
				monthSell: '',
				pca: '',
				busineddHours: '',
				distribution: '',
				allList: [],
				pageNum: 1,
				pageSize: 10,
				address: '',
				qualificationsImagesList: '',
				colldata: ''
			}
		},
		onLoad(option) {
			this.optionId = option.sid
			// console.log(option)
			this.getshop()
			this.getTeamList()

		},
		methods: {
			getshop(){
				// 查询商户主页界面
				const requestAboutshop = {
					url: `/api/merchant/selectMerchanIndexData/${this.optionId}`,
					method: "get",
					callBack: (res) => {
						this.text = 'request success';
						this.id = res.data.id
						this.merchantName = res.data.merchantName
						this.logo = res.data.logo
						this.averageSocre = JSON.stringify(res.data.averageSocre)
						this.monthSell = JSON.stringify(res.data.monthSell)
						this.address = res.data.address
						this.islove = res.data.isLoveState
						console.log(res.data)
					}
				}
				this.$http.request(requestAboutshop)
			},
			
			// 添加 取消收藏
			collect() {
				if (this.islove == false) {
					const requestAddcoll = {
						url: `/api/collect/addCollection/${this.optionId}/1`,
						method: 'get',
						callBack: (res) => {
							this.text = 'request success';
							if(res.data == 1){
								this.islove == true 
								this.getshop()
							}else if(res.data == 0){
								this.islove == true
								this.getshop()
								uni.showToast({
									title:'已经收藏',
									duration:2500,
								})
							}else{
								this.getshop()
								uni.showToast({
									title:'商家异常',
									duration:2500,
								})
							}
							// console.log(res.data)
						}
					}
					this.$http.request(requestAddcoll)
				}else{
					const requestCancelcoll = {
						url: `/api/collect/cancel/${this.optionId}`,
						method: 'get',
						callBack: (res) => {
							this.text = 'request success';
							if(res.data == true){
								this.islove == false
								this.getshop()
							}else{
								this.getshop()
								uni.showToast({
									title:'取消收藏失败',
									duration:2500,
								})
							}
						}
					}
					this.$http.request(requestCancelcoll)
				}
			},

			go(e) {
				uni.navigateTo({
					url: './Hotdetails?sid=' + e,
				})
			},
			getTeamList() {
				// 商品列表
				const requestAll = {
					url: `/api/commodity/merchantInCommodity/list`,
					method: "POST",
					data: {
						vid: uni.getStorageSync('vid'),
						current:"1",
						size:"10",
					},
					callBack: (res) => {
						this.allList = res.data.records
						// console.log(allList)
					}
				}
				this.$http.request(requestAll)
			},
			getBisnessList() {
				//查询商户详情

				const requestAboutdetails = {
					url: `/api/merchant/details/${this.optionId}`,
					method: "get",

					callBack: (res) => {
						console.log(res.data);
						this.text = 'request success';
						this.province = res.data.province
						this.city = res.data.city
						this.address = res.data.address
						this.busineddHours = res.data.busineddHours
						this.distribution = res.data.distribution
						this.qualificationsImagesList = res.data.qualificationsImagesList
						if (this.distribution == 1) {
							this.distribution = '参与'
						} else if (this.distribution == 0) {
							this.distribution = '不参与'
						}
					}
				}
				this.$http.request(requestAboutdetails)
			}


		},
		watch: {
			Inv() {
				if (this.Inv == 1) {
					this.getBisnessList()
				} else {
					this.getTeamList()
				}

			}
		}
	}
</script>

<style>
	.Hotmain {
		background-color: #F1F1F1;
		width: 100%;
		height: 100vh;
	}

	.Hotmain .all {
		padding: 20rpx;
	}

	.Hotmain .all .head {
		width: 710rpx;
		height: 190rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		position: relative;
	}

	.head .logo {
		position: absolute;
		top: 20rpx;
		margin-left: 20rpx;
	}

	.head .title {
		position: absolute;
		top: 17rpx;
		margin-left: 145rpx;
	}

	.star {
		position: absolute;
		top: 56rpx;
		left: 0;
		width: 700rpx;
		display: flex;
		flex-direction: row;
	}

	.star image {
		width: 40rpx;
		height: 40rpx;
	}

	.address {
		width: 628rpx;
		position: absolute;
		top: 118rpx;
		left: -125rpx;
	}

	.title .heart {
		position: absolute;
		top: 5rpx;
		left: 480rpx;
	}

	.title .heart image {
		width: 80rpx;
		height: 80rpx;
	}

	.shopword {
		margin-top: 13rpx;
	}

	.numb_nav {
		display: flex;
		justify-content: space-between;
		background-color: #E5E5E5;
		height: 80rpx;
		line-height: 80rpx;
		color: #000000;
		font-size: 32rpx;
	}

	.numb_nav view {
		width: 50%;
		text-align: center;
	}

	.numb_nav .nav_tes {
		font-weight: bold;
		background-color: #FFFFFF;
		color: #000000;
	}

	.group .shop {
		height: 240rpx;
		background-color: #FFFFFF;
		border-bottom: 4rpx solid #F1F1F1;
		display: flex;
	}

	.shopimg {
		margin-left: 20rpx;
	}

	.shopimg image {
		width: 200rpx;
		height: 200rpx;
		margin-top: 20rpx;
	}

	.shopname {
		font-size: 24rpx;
		color: #000000;
		font-weight: bold;
		margin-left: 20rpx;
	}

	.partake {
		width: 104rpx;
		height: 32rpx;
		border-radius: 20rpx;
		border: 2rpx solid #FFC300;
		margin-top: 6rpx;
		margin-left: 17rpx;
		font-size: 20rpx;
		color: #FCC100;
		line-height: 32rpx;
		text-align: center;
	}

	.monthgod {
		margin-left: 18rpx;
		font-size: 20rpx;
		color: #000000;
		margin-top: 12rpx;
	}

	.shopmoney {
		margin-top: 50rpx;
		margin-left: 20rpx;
		position: relative;
	}

	.shopmoney .Qbuy {
		width: 86rpx;
		height: 44rpx;
		background-color: #FCC100;
		border-radius: 10rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		font-weight: bold;
		text-align: center;
		line-height: 44rpx;
		margin-left: 232rpx;
		position: absolute;
		top: 2rpx;
		left: 148rpx;
	}

	.up {
		height: 120rpx;
		background-color: #F1F1F1;
		text-align: center;
		color: #999999;
		font-size: 24rpx;
		line-height: 80rpx;
	}

	.local {
		background-color: #FFFFFF;
		width: 100%;
		height: 80rpx;
		color: #000000;
		font-size: 32rpx;
		line-height: 80rpx;
		position: relative;
	}

	.local image {
		width: 60rpx;
		height: 60rpx;
		margin-left: 20rpx;
		position: absolute;
		top: 10rpx;
	}

	.local text {
		margin-left: 96rpx;
	}

	.storeimg {
		height: 280rpx;
		width: 100%;
		background-color: #FFFFFF;
	}

	.storeimg image {
		margin-top: 20rpx;
		margin-left: 20rpx;
		width: 240rpx;
		height: 240rpx;
	}

	.storesee {
		width: 100%;
		height: 80rpx;
		background-color: #FFFFFF;
		border-bottom: 4rpx solid #F1F1F1;
		color: #000000;
		font-size: 32rpx;
		line-height: 80rpx;
	}

	.servetime {
		width: 100%;
		height: 80rpx;
		background-color: #FFFFFF;
		border-bottom: 4rpx solid #F1F1F1;
		color: #000000;
		font-size: 32rpx;
		line-height: 80rpx;
	}

	.shopenjoy {
		width: 100%;
		height: 88rpx;
		background-color: #FFFFFF;
		border-bottom: 4rpx solid #F1F1F1;
		color: #000000;
		font-size: 32rpx;
		line-height: 80rpx;
		position: relative;
	}

	.yellowenjoy {
		width: 160rpx;
		height: 64rpx;
		background-color: #FDC100;
		color: #FFFFFF;
		font-size: 32rpx;
		line-height: 64rpx;
		text-align: center;
		font-weight: bold;
		border-radius: 10rpx;
		position: absolute;
		top: 9rpx;
		left: 572rpx;
	}
</style>
